<template>
  <div class="container">
    <!-- 头部标签 -->
    <div class="header">
      <div class="logo">
        <el-image
          style="width: 100%; height: 100%"
          :src="urlLogo"
          fit="fill"
        />
      </div>
      <div class="title">
        {{ title }}
      </div>
      <div class="collection">
        <a href="">设为首页 </a>|
        <a href="">收藏</a>
      </div>
    </div>
    <!-- 登录主体部分 -->
    <div class="subject">
      <!-- 登录图片 -->
      <div class="loginImg">
        <el-image
          style="width: 100%; height: 100%"
          :src="urlLogin"
          fit="fill"
        />
      </div>
      <!-- 登录表单 -->
      <div class="loginForm">
        <div class="login">
          <div class="loginTitle">
            {{ loginTitle }}
          </div>
          <el-form ref="loginForm" style="margin-top:10px:" :model="loginForm" :rules="rules" class="demo-ruleForm">
            <!-- 工号 -->
            <el-form-item prop="code">
              <el-input ref="code" v-model="loginForm.code" type="text" name="code" placeholder="请输入工号" autocomplete="on">
                <span slot="prefix">
                  <svg-icon icon-class="user" />
                </span>
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input ref="password" v-model="loginForm.password" :type="pass" name="password" placeholder="请输入密码" autocomplete="on">
                <span slot="prefix">
                  <svg-icon icon-class="password" />
                </span>
                <span slot="suffix" @click="showPass">
                  <svg-icon :icon-class="icon" />
                </span>
              </el-input>
            </el-form-item>
            <!-- 租号 -->
            <el-form-item prop="account">
              <el-input ref="account" v-model="loginForm.account" type="text" name="account" placeholder="租户id">
                <span slot="prefix">
                  <svg-icon icon-class="user" />
                </span>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="isShowSlider=true">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 备案信息 -->
    <div class="footer">
      <span>闽ICP备2021002460号</span>
      <span>CopyRight © 2021-2031 博思软件</span>
      <div class="footerLink">
        浏览器：
        <a href="https://www.google.cn/intl/zh-CN/chrome/">chrome90</a>
        /
        <a href="https://www.microsoft.com/en-us/edge">IE10</a>
        以上 | 分辨率建议1024*1960
      </div>
      <div class="footerLogo">
        <img src="http://172.18.169.179/uc/static/img/bosssoft.71343f5d.png" alt="">
        <div class="bosssoft">博思软件</div>
      </div>
    </div>
    <!-- 滑块验证组件 -->
    <slider v-show="isShowSlider" @SliderSuccess="sliderSuccess" @closeSlider="closeSlider" />
  </div>
</template>

<script>
import Slider from '@/views/login/Slider'
import { Message } from 'element-ui'
export default {
  name: 'Login',
  components: { Slider },
  data() {
    // 工号错误输入
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    // 密码错误输入
    var password = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    // 租号错误输入
    var account = (rule, value, callback) => {
      if (!value) {
        callback(new Error('租户不能为空'))
      } else {
        callback()
      }
    }
    return {
      urlLogo: 'http://172.18.169.179/uc/static/img/sdLogo.b1dd2342.png',
      urlLogin: 'http://172.18.169.179/uc/static/img/sybg.ae316054.jpg',
      title: '用户中心用户身份验证v1.0.9.1014',
      icon: 'eye',
      pass: 'password',
      redirect: undefined,
      loginTitle: '账号登录',
      isShowSlider: false,
      loginForm: {
        code: '18893750835',
        password: '123456',
        account: 'BOSSSOFT'
      },
      rules: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: password, trigger: 'blur' }
        ],
        account: [
          { required: true, validator: account, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 监听路由
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 登录提交表单信息到服务端验证
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 调用后端
          debugger
          console.log('this.$store', this.$store)
          this.$store.dispatch('user/login', this.loginForm).then(res => {
            console.log('login-res', res)
            if (res.code === 200) {
              Message({
                message: res.msg,
                type: 'success',
                duration: 5 * 1000
              })
              // 路由跳转
              this.$router.push({ path: this.redirect || '/' })
            } else {
              Message({
                message: res.msg || ' error code: ' || res.code,
                type: 'error',
                duration: 5 * 1000
              })
            }
          }).catch((error) => {
            console.error(error)
            Message({
              message: '服务器异常',
              type: 'error',
              duration: 5 * 1000
            })
          })
        } else {
          console.log('输入异常')
          return false
        }
      })
    },
    showPass() {
      // 点击图标是密码隐藏或显示
      if (this.pass === 'text') {
        this.pass = 'password'
        // 更换图标
        this.icon = 'eye'
      } else {
        this.pass = 'text'
        this.icon = 'eye-open'
      }
    },
    /**
    * 登录验证组件通过验证这触发登录校验
    */
    sliderSuccess() {
      var that = this
      setTimeout(function() { that.isShowSlider = false }, 1000)
      this.submitForm()
    },
    closeSlider() {
      this.isShowSlider = false
    }
  }
}
</script>

<style scoped>
    .container{
        height: 100%;
        background-color: #e4e7ed;
        overflow-y:hidden;
    }
    /* 头部标签 */
    .header{
        display: flex;
        align-items: center;
        height: 10vh;
        font-size: 17px;
    }
    /* 左上角logo图片 */
    .logo{
        width: 8vh;
        height: 8vh;
        margin-inline: 1vh;
        border-radius: 50%;
        overflow: hidden;
    }
    /* 右上角按钮 */
    .collection{
        position: absolute;
        right: 2vw;
    }
    .collection a:hover{
        color: #409eff;
    }
    /* 登录主体部分 */
    .subject{
        height: 80vh;
        background: #409eff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* 登录左侧图片 */
    .loginImg{
        width: 38vw;
        height: 65%;
        border-radius: 20px;
        overflow: hidden;
    }
    /* 登录表单外层盒子 */
    .loginForm{
        width: 38vw;
        height: 65%;
        border-radius: 20px;
        overflow: hidden;
        background-color: white;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    /* 登录表单内层盒子 */
    .login{
        width: 80%;
        height: 80%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }
    .loginTitle{
        margin-left: 5px;
        font-weight: bold;
        font-size: 18px;
    }
    /* 备案信息 */
    .footer{
        height: 9vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content:space-around;
        font-size: 13px;
        color: #90a1a3;
    }
    .footerLink{
        color: red;
    }
    .footerLogo{
        position: absolute;
        right: 0;
        width: 10vw;
        height: 10vh;
    }
    .footerLogo img{
        width: 100%;
        height: 50%;
    }
    .bosssoft{
        color: #000;
        width: 100%;
        height: 50%;
        font-size: 15px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    @media(max-width: 600px){
      .loginImg{
        display: none;
      }
      .loginForm{
        width: 80%;
      }
    }
</style>
